<template>
  <div class="comment">
    <h1>发表评论</h1>
    <div class="line"></div>
    <textarea placeholder="请输入评论内容(最多120字)" v-model="msg" rows="5" maxlength="120"></textarea>
    <mt-button type="primary" size="large" @click="release">发表评论</mt-button>
    <div class="comment-list" v-for="(item, i) in comments" :key="item.add_time">
      <div>第{{ i + 1 }}楼 用户: {{ item.user_name }} 发表时间: {{ item.add_time | dataTime }}</div>
      <p>{{ item.content === "undefined" ? '此用户什么都没写' : item.content }}</p>
    </div>
    <mt-button type="danger" size="large" plain @click="getLoad">加载更多</mt-button>
  </div>
</template>

<script>
export default {
  name: "comment",
  data() {
    return {
      msg: "",
      comments: [
        { user_name: "匿名用户", add_time: "1563885184000", content: "评论内容111" },
        { user_name: "匿名用户", add_time: "1563851230000", content: "评论内容222" },
        { user_name: "匿名用户", add_time: "1563858900000", content: "评论内容333" },
        { user_name: "匿名用户", add_time: "1563853565000", content: "评论内容444" },
        { user_name: "匿名用户", add_time: "1563854587000", content: "评论内容555" },
        { user_name: "匿名用户", add_time: "1563853562000", content: "评论内容6666" },
        { user_name: "匿名用户", add_time: "1563852563000", content: "undefined" },
      ]
    }
  },
  created() {
    // this.getComment()
  },
  methods: {
      getComment() {// 获取评论内容
      this.$axios.get("http://suggest.taobao.com" + this.id).then(response => {
          // 请求成功
        }).catch(error => {
          // 请求失败
        });
    },
    release() {// 发表评论
      if(this.msg.trim().length === 0) {
        return this.$toast("评论内容不能为空")
      }
      let cmt = { user_name: "匿名用户", add_time: Date.now(), content: this.msg.trim() }
      this.comments.unshift(cmt)
      this.msg = ""
    },
    getLoad() {// 获取评论内容用于加载更多
      let commentss = [
            { user_name: "匿名用户", add_time: "1563885184151", content: "评论内容77" },
            { user_name: "匿名用户", add_time: "1563369845000", content: "评论内容88" },
            { user_name: "匿名用户", add_time: "1563145896000", content: "评论内容99" },
            { user_name: "匿名用户", add_time: "1562569854000", content: "评论内容100" },
            { user_name: "匿名用户", add_time: "1563854120000", content: "评论内容1561" },
            { user_name: "匿名用户", add_time: "1563804521000", content: "评论内容7896" },
            { user_name: "匿名用户", add_time: "1563851485000", content: "undefined" },
        ]
        if(this.comments.length < 10){
          this.comments = this.comments.concat(commentss)
          this.$toast("加载成功")
        }else {
          this.$toast("没有更多数据")
        }
    }
  },
  props: ["id"]
};
</script>

<style lang="scss" scoped>
.comment {
  h1 {
    font-size: 20px;
  }
  .line {
    border-top: 2px solid #c0c0c0;
    margin-top: 10px;
    padding-top: 10px;
  }
  textarea {
    width: 100%;
    border: 1px solid #c0c0c0;
  }
  .comment-list {
    margin: 10px 0;
    div {
      background: #c0c0c0;
      height: 30px;
      line-height: 30px;
      font-size: 0.8rem;
    }
    p {
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      margin-top: 10px;
      text-indent: 2em;
      font-size: 1rem;
    }
  }
}
</style>